<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    $(function (){
        $.getJSON("/Status/student", function (result) {

            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};

            var option;

            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '30%']
                },
                visualMap: {
                    type: 'piecewise',
                    show: false,
                    dimension: 0,
                    seriesIndex: 0,
                    pieces: [
                        {
                            gt: 1,
                            lt: 3,
                            color: 'rgba(0, 0, 180, 0.4)'
                        },
                        {
                            gt: 5,
                            lt: 7,
                            color: 'rgba(0, 0, 180, 0.4)'
                        }
                    ]
                },
                series: [
                    {
                        type: 'line',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#5470C6',
                            width: 5
                        },
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false},
                            data: [{xAxis: 1}, {xAxis: 3}, {xAxis: 5}, {xAxis: 7}]
                        },
                        areaStyle: {},
                        data: result.data
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

            window.addEventListener('resize', myChart.resize);

        });
    });

</script>
</body>
</html>